<template>
  <!--审批台账-->
  <div class="approvalAccount">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>
      审批台账
      <mu-button icon slot="right" @click="searchcontroll = true">
        <!--<i class="iconfont iconshaixuan4"></i>-->
      </mu-button>
    </mu-appbar>

    <section class="t-body" >
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section >
              <div v-for="(i,index) in data" :key="index">
                <div class="card" @click="problemDetail(i)" v-if="i.applyType==1">
                  <section class="tit">
                    <div style="display: flex">
                      <div style="padding: 0 0.12rem 0 0 ;">
                        <div class="lan-btn circle danger" v-if="i.problemLevel == 3">
                          重大
                        </div>
                        <div class="lan-btn circle default" v-if="i.problemLevel == 1">
                          一般
                        </div>
                        <div class="lan-btn circle warning" v-if="i.problemLevel == 2">
                          较大
                        </div>
                      </div>
                      <!--<span class="tag">{{i.problemLevel | status}}</span>&lt;!&ndash;问题类型&ndash;&gt;-->
                      <div>
                        <div class="lan-btn circle default" v-if="i.applyType == 0">
                          问题闭合
                        </div>
                        <div class="lan-btn circle danger" v-if="i.applyType == 1">
                          隐患延期
                        </div>
                      </div>
                      <!--<span class="tag-question">{{i.applyType | types}}</span>&lt;!&ndash;整改类型&ndash;&gt;-->
                    </div>
                    <!--<span class="tag-question">{{i.approvalResult | state}}</span>&lt;!&ndash;问题闭合&ndash;&gt;-->
                    <div class="tag-question">
                      <div class="lan-btn no-bg default" v-if="i.approvalResult == 1">
                        不通过
                      </div>
                      <div class="lan-btn no-bg success" v-if="i.approvalResult == 0">
                        通过
                      </div>
                    </div>
                  </section>
                  <div class="t-con">
                    <div class="outline">
                      <span class="outline_name">项目名称：</span>
                      <span class="outline_con">{{ i.orgName || '---' }}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">问题描述：</span>
                      <span class="outline_con">{{i.problemDesc || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">申请人：</span>
                      <span class="outline_con">{{i.applyUserName || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">申请时间：</span>
                      <span class="outline_con">{{i.applyTime || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">备注：</span>
                      <span class="outline_con">{{i.applyDesc || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">审核时间：</span>
                      <span class="outline_con">{{ i.approvalTime || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">问题闭合审核人：</span>
                      <span class="outline_con">{{i.approvalUserName || '---'}}</span>
                    </div>
                    </div>
                  <!-- <div  class="lan-card-footer" style="justify-content: flex-end" >
                    <div class="lan-btn big default" >
                      生成整改单
                    </div>
                  </div> -->
                </div>

                <div class="card" @click="problemDetail(i)" v-if="i.applyType==0">
                  <section class="tit">
                    <div style="display: flex">
                      <div style="padding: 0 0.12rem 0 0 ;">
                        <div class="lan-btn circle danger" v-if="i.problemLevel == 3">
                          重大
                        </div>
                        <div class="lan-btn circle default" v-if="i.problemLevel == 1">
                          一般
                        </div>
                        <div class="lan-btn circle warning" v-if="i.problemLevel == 2">
                          较大
                        </div>
                      </div>
                      <div>
                        <div class="lan-btn circle default" v-if="i.applyType == 0">
                          问题闭合
                        </div>
                        <div class="lan-btn circle danger" v-if="i.applyType == 1">
                          隐患延期
                        </div>
                      </div><!--整改类型-->
                    </div>
                    <div class="tag-question">
                      <div class="lan-btn no-bg default" v-if="i.approvalResult == 1">
                        不通过
                      </div>
                      <div class="lan-btn no-bg success" v-if="i.approvalResult == 0">
                        通过
                      </div>
                    </div>
                  </section>
                  <div class="t-con">
                    <div class="outline">
                      <span class="outline_name">项目名称：</span>
                      <span class="outline_con">{{i.orgName || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">问题描述：</span>
                      <span class="outline_con">{{i.problemDesc || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">延期申请人：</span>
                      <span class="outline_con">{{i.applyUserName||'---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">申请时间：</span>
                      <span class="outline_con">{{i.applyTime||'---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">原始整改期限：</span>
                      <span class="outline_con">{{i.beforeEndTime || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">延期整改期限：</span>
                      <span class="outline_con">{{i.afterEndTime || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">备注：</span>
                      <span class="outline_con">{{i.applyDesc||'---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">审核时间：</span>
                      <span class="outline_con">{{i.approvalTime || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">延期处理审核人：</span>
                      <span class="outline_con">{{ i.approvalUserName || '---'}}</span>
                    </div>
                  </div>
                  <!-- <div  class="lan-card-footer" style="justify-content: flex-end" >
                    <div class="lan-btn big default" >
                      生成整改单
                    </div>
                  </div> -->
                </div>
              </div>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
      <NoData v-if="!data.length"/>
    </section>

    <!-- 筛选 -->
    <mu-dialog width="100%" transition="slide-right" fullscreen :open.sync="searchcontroll" class="lan-dialog">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>

          <mu-form-item label="结束时间">
            <mu-date-input v-model="form.endTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" container="bottomSheet" label-float></mu-date-input>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>
          <mu-form-item  label="检查人">
            <mu-text-field v-model="form.projectName" placeholder="请输入"></mu-text-field>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>

          <mu-form-item label="申请类型">
            <mu-select
              v-model="form.ApiModelProperty"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in checkTypeList"
                :key="index"
                :label="list.name"
                :value="list.id"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>

        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>
  </div>
</template>

<script>
  export default {
    name: "approvalAccount",
    data () {
      return {
        searchcontroll:false,
        data:[],
        pageSize: 10,
        pageNo: 0,
        totalPage:1,
        refreshing: false,
        loading: false,
        checkTypeList:[{id:0,name:'延期处理'},{id:1,name:'隐患闭合'},{id:2,name:'行为观察'},{id:3,name:'积分上报'}],
        form : {
          startTime: '',
          endTime: '',
          partItemName: '',//检查人
          projectName:'',
          ApiModelProperty:'',//检查类型
        }
      }
    },
    filters:{
      state (val) {
        if (val == 1 ) {
          return '不通过'
        }
        if (val == 0) {
          return '通过'
        }
      },
      types (val) {
        if (val == 0) {
          return '问题闭合'
        }else if (val == 1) {
          return '隐患延期'
        }
      },
      status (val) {
        if (val===1) {
          return '一般问题'
        }else if(val===2){
          return '较大问题'
        }else if (val===3) {
          return '重大问题'
        }
      }
    },
    props: {},
    components: {},
    mounted () {
      this.loadTreeData();
    },
    created () {
    },
    methods: {
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.loadTreeData();
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.loadTreeData();
        }, 2000)
      },
      //查询
      search () {
        this.loadTreeData();
        this.searchcontroll = false;
      },
      //清空
      clearSearch () {
        this.form = {
          startTime: '',
          endTime: '',
          partItemName: '',//检查人
          projectName:''
        }
      },
      problemDetail (val) {
        this.$router.push(
          {
            path: '/accountDetaildf',
            query: {
              info: val.checkProblemId,
            }
          });
      },

      loadTreeData () {
        console.log(this.pageNo, this.totalPage);
        if (this.pageNo >= this.totalPage) {
          // this.$closeLoading();
          return false
        };
        this.pageNo += 1;
        this.$openLoading();

        let params = {
          orgId: this.$A.GS("orgInfo")["orgId"],
          type: this.$A.GS("orgInfo")["type"],
          current:this.pageNo,	//是	int		当前页
          size:this.pageSize,	//是	int		当前页大小
          startTime:this.form.startTime,	//否	string		开始时间
          endTime:this.form.endTime,	//否	string		结束时间
          ApiModelProperty:this.form.ApiModelProperty,//0:延期处理;1:隐患闭合;2行为观察;3积分上报
          userId:this.form.partItemName,	//否	string		申请人
        };
        this.$A.Go("get", '/safety/approval/rec/pageList', params).then(response => {
          this.$closeLoading();
          if (response.code == 200) {
            // this.data = response.body.rows;

            let datas = response.body.rows;
            this.data = this.data.concat(datas);
            let total = response.body.page.rows|| '0';
            this.totalPage = Math.ceil(total /this.pageSize);
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .approvalAccount {

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    section {
      flex: 1;
      overflow: auto;
      padding: 0.1rem 0;
      .card {
        position: relative;
        border-bottom: 0.01rem solid #EFEFEF;
        background-color: #FFFFFF;
        margin: 0.12rem;
        box-shadow: 0px 2px 8px 0px rgba(182, 182, 182, 0.4);
        .tit {
          display: flex;
          justify-content: space-between !important;
          border-bottom:0.01rem dashed #E0E0E0;
          padding:0.12rem;
          .tag {
            width: fit-content;
            height: fit-content;
            padding: 0.06rem;
            background-color: white;
            border-radius: 0.02rem;
            font-size: 0.12rem;
            line-height: 0.12rem;
            color: #0095FF;
          }
          .tag-question {
            font-size: 0.13rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 149, 255, 1);
            line-height: 0.18rem;
          }
          .active0 {
            color: #389D2B;
          }
          .active1 {
            color: #0095FF;
          }
          .active2 {
            color: #FF8A1B;
          }
        }
        .t-con{
          padding: 0.12rem;
          .outline {
            padding: 0.05rem 0;
            .outline_name {
              font-size: 0.15rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(140, 140, 140, 1);
              line-height: 0.21rem;
            }
            .outline_con {
              font-size: 0.15rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(61, 61, 61, 1);
              line-height: 0.21rem;
            }
          }
        }
      }
    }
  }
</style>
